<template>
    <el-container>
        <el-header style="text-align: right; font-size: 12px" ref="headerHeight">
            <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><span @click="logoutUserInformation">注销</span></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span>dsdf</span>
            <div style="float: left; cursor:pointer" @click="isOpen">
                <i
                    :class="{'el-icon-s-fold': isCollapse == false?true:false, 'el-icon-s-unfold': isCollapse == true?true:false}"></i>
            </div>
            <el-dropdown trigger="click" style="cursor: pointer; float: right">
                <i class="fa fa-ellipsis-v fa-lg"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>关闭全部页面</el-dropdown-item>
                    <el-dropdown-item>刷新页面</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container :style="{height: getHeight}">
            <el-aside style="width: auto;background-color: rgb(84, 92, 100)">
                <el-menu
                    :default-vuexactive="String(activeNav)"
                    class="el-menu-vertical-demo"
                    :collapse="isCollapse"
                    :collapse-transition="true"
                    :unique-opened="true"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    router
                >

                    <!--动态生成sideItem-->
                    <template v-for="(item, parentIndex) in navList">
                        <SideNav :item="item" :index="parentIndex"></SideNav>
                    </template>
                </el-menu>
            </el-aside>
            <el-main :style="{height: getHeight, padding: 0}">
                <el-tabs v-model="activeTab" type="card" @tab-remove="removeTab" @tab-click="tabClick">
                    <el-tab-pane v-for="(item, index) in tabsItem"
                                 :key="item.name"
                                 :label="item.title"
                                 :name="item.name"
                                 :closable="item.closable"
                                 :ref="item.ref">
                        <component :is="item.content"></component>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name: 'index',
    data () {
        return {
            // false为展开 true为收缩
            isCollapse: false,
            // 默认显示的tab
            activeTab: '1',
            // tab目前显示数
            tabIndex: 1,
            // 左侧导航数据数组
            navList: [],
            defaultOpen: ['0'],
            username: '',
            headerHeightVal: 70,
        }
    },
    computed: {
        getHeight: function () {
            return (document.documentElement.clientHeight - this.headerHeightVal - 10) + 'px'
        },
        activeNav () { //当前激活的导航
            return this.$route.path
        },
    },
    mounted () {
    },
    methods: {
        // 判断左侧栏是否展开或收缩
        isOpen () {
            // eslint-disable-next-line eqeqeq
            if (this.isCollapse == false) {
                this.isCollapse = true
            } else {
                this.isCollapse = false
            }
        },
        logoutUserInformation () {

        },
        removeTab (targetName) { //删除Tab
            let tabs = this.tabsItem //当前显示的tab数组
            let activeName = this.activeTab //点前活跃的tab

            //如果当前tab正活跃 被删除时执行
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1]
                        if (nextTab) {
                            activeName = nextTab.name
                            this.tabClick(nextTab)
                        }
                    }
                })
            }
            this.activeTab = activeName
            this.tabsItem = tabs.filter(tab => tab.name !== targetName)
            //在tabsPath中删除当前被删除tab的path
            this.tabsPath = this.tabsPath.filter(item => item.name !== targetName)
        },

    }
}
</script>

<style>
body {
    background-image: url(../../static/img/white.jpg);
}

.el-aside {
    color: #333;
}


.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    height: 100%;
}

.el-menu--collapse {
    height: 100%;
}

.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}

.el-submenu [class^=fa] {
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 16px;
}
</style>
